import React from 'react';
import { Form, Select, Input, Button, Card, InputNumber, Modal, DatePicker, Row, Col } from 'antd';
import PageHeaderLayout from '../../../../components/Layout/PageHeaderLayout';
import { LwjUpload } from 'components';
import FooterToolbar from 'components/FooterToolbar';
import moment from 'moment';
import LwjTable from 'components/LwjTable/LwjTable'
import GeneralFilter from 'components/Filter/GeneralFilter'

const FormItem = Form.Item;
const AddCouponForm = ({
  form: {
    getFieldDecorator,
    validateFieldsAndScroll,
    setFieldsValue
  },
  setVisible,
  dispatch,
  currentSelect,
  currentItem,
  visible, items, pagination, location, loading
}) => {
  const breadcrumbList = [
    {
      title: '营销管理'
    }, {
      title: '优惠券'
    }, {
      title: '添加优惠券'
    }
  ];


  const handleSubmit = (e) => {
    e.preventDefault();
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.distributorId = currentSelect[0].id;
        values.addTime = values.addTime.valueOf();
        delete values.financialAccount;
        dispatch({
          type: 'coupon/add',
          payload: {
            id: currentItem,
            ...values
          }
        })
      }
    });
  }

  const xlsProps = {
    target: '/services/upload/coupon',
    accept: 'image/*,.pdf,.dwg,.dwf,.zip,.rar,.xlsx,.xls',
    uploadIcon: 'upload',
    fileType: '',
    showUploadList: true
  }
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'name',
        title: '名称',
        placeholder: '门店名称'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'coupon/distributorQuery',
        payload: {
          ...value
        }
      })
    }
  }

  const listProps = {
    dataSource: items,
    loading: loading.effects['coupon/distributorQuery'],
    pagination,
    pageChangeAction: 'coupon/distributorQuery',
    dispatch,
    location,
    onSelectRows: (id, data) => {
      setVisible(false)
      dispatch({
        type: 'coupon/setSelectRecord',
        payload: data
      })
      setFieldsValue({ "distributorId": data[0].organizationName })
    },
  };
  const columns = [{
    title: '门店名称',
    dataIndex: 'organizationName',
    key: 'organizationName',
  }, {
    title: '门店编码',
    dataIndex: 'code',
    key: 'code',
  }]
  return (
    <PageHeaderLayout title="添加优惠券" breadcrumbList={breadcrumbList} bordered={false}>
      <Form onSubmit={handleSubmit}  >
        <Modal
          title="请选择门店"
          visible={visible}
          onCancel={() => setVisible(false)}
          width={900}
          footer={false}
          destroyOnClose={true}
          loading={loading.global}
        >
          <GeneralFilter {...filterProps} />
          <LwjTable {...listProps} selectType="single" columns={columns} />
        </Modal>
        <Card type="inner" title="优惠券信息">
          <div style={{ paddingLeft: 5 }}>
            <Row gutter={8}>
              <Col span={12} >
                <FormItem
                  label="适用门店"
                  labelCol={{ span: 16 }}
                  wrapperCol={{ span: 8 }}
                >
                  {getFieldDecorator('distributorId', {
                    rules: [
                      { required: true, message: '请选择门店' },
                    ],
                  })(
                    <Input disabled={true} />
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <Button type='primary' style={{ marginTop: 1.5 }} onClick={() => setVisible(true)}>选择门店</Button>
              </Col>
            </Row>
          </div>
          <FormItem
            label="收款账户"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 6 }}
          >
            {getFieldDecorator('financialAccount', {
              rules: [
                { required: true, message: '请选择收款账户' },
              ],
              initialValue: "优惠券"
            }
            )(
              <Select >
                <Select.Option value="优惠券">优惠券</Select.Option>
              </Select>
            )}
          </FormItem>
          <FormItem
            label="优惠券金额"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 6 }}
          >
            {getFieldDecorator('amount', {
              rules: [
                { required: true, message: '请输入优惠券金额' },
              ],
            })(
              <InputNumber min={0} />)}
          </FormItem>
          <FormItem
            label="添加方式"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 6 }}
          >
            {getFieldDecorator('addType', {
              rules: [
                { required: true, message: '请选择添加方式' },
              ],
              initialValue: "COUPON_RECHARGE"
            })(
              <Select >
                <Select.Option value="COUPON_RECHARGE">优惠券充值</Select.Option>
              </Select>)}
          </FormItem>
          <FormItem
            label="支付凭证号"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 6 }}
          >
            {getFieldDecorator('paymentNum', {
              rules: [
                { required: true, message: '请输入支付凭证号' },
              ],
            })(
              <Input />)}
          </FormItem>
          <FormItem
            label="支付时间"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 6 }}
          >
            {getFieldDecorator('addTime', {
              rules: [
                { required: true, message: '请选择支付时间' },
              ],
            })(
              <DatePicker style={{ width: '100%' }} />)}
          </FormItem>
          <FormItem
            label="上传附件"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 6 }}
          >
            {getFieldDecorator('attachment', {
              rules: [
                { required: true, message: '请上传邮件申请截图' },
              ],
            })(
              <LwjUpload multiple={true} {...xlsProps} />
            )}
            <span>请上传邮件申请截图</span>
          </FormItem>
          <FormItem
            label="适用合同号"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 6 }}
            style={{ marginTop: -20 }}
          >
            {getFieldDecorator('contractOrder', {
              rules: [
                { required: true, message: '请填写合同号' },
              ],
            })(
              <Input />)}
          </FormItem>
          <FormItem
            label="备注"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 6 }}
          >
            {getFieldDecorator('memo', {
              rules: [
                { required: true, message: '请填写备注' },
              ],
            })(
              <Input />)}
          </FormItem>
        </Card>
        <FooterToolbar style={{
          width: '100%'
        }}>
          <Button loading={loading.global} type="primary" htmlType="submit">
            提交
            </Button>
        </FooterToolbar>
      </Form>
    </PageHeaderLayout>
  );
};

export default Form.create()(AddCouponForm);
